<template>
    <div class="preview_container" :style="containerStyle">
        <div class="print_container" :style="pageStyle" v-html="printHtml"></div>
        <div class="page_container" v-if="!preview">
            <pagination :option="pagination" :event="paginationEvent" />
        </div>
    </div>
</template>

<script>
import { hiprint } from "@common/plugins/hiprint";
import { genPrintData } from "@common/components/hiprint/print";
import { HiPrint } from "@common/components/hiprint/hiprint";

export default {
    name: "Preview",
    components: {
        Pagination: () => import("../../../custom/Pagination"),
    },
    props: {
        template: {
            type: Object,
            default: null,
        },
        data: {
            type: [String, Object, Array],
            default: null,
        },
        fetch: {
            type: Function,
            default: null,
        },
        panelIndex: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 1,
        },
        preview: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        const _this = this;
        return {
            printTemplate: undefined,
            pagination: {
                pageSize: _this.pageSize,
                pagerCount: 7,
                currentPage: 1,
                layout: 'total, sizes, prev, pager, next, jumper',
                pageSizes: [ 1, 2, 3, 4, 5, 10 ],
                total: 0,
            },
            paginationEvent: {
                sizeChange: _this.handlePageSizeChange,
                currentChange: _this.handlePageChange,
            },
            printHtml: '',
        };
    },
    computed: {
        containerStyle() {
            let height = $(this.getActiveTabsContainer()).height() * 0.8;
            return {
                height: `${ height }px`,
            };
        },
        pageStyle() {
            if (this.preview) {
                return {
                    height: '100%',
                };
            }
            return {
                width: `calc(${ this.panelData.width }mm + 14px)`,
            };
        },
        panels() {
            return this.template.panels.map(item => $.extend({}, item));
        },
        panelData() {
            return $.extend({}, this.panels[this.panelIndex]);
        },
    },
    watch: {
        template: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.template) {
                return;
            }
            if (!_this.preview && !_this.fetchData) {
                return;
            }
            if (_this.preview) {
                _this.printTemplate = new hiprint.PrintTemplate({
                    template: _this.template,
                });
                _this.printHtml = _this.printTemplate.getHtml(_this.data).html();
                return;
            }
            hiprint.init();
            // 还原配置
            hiprint.setConfig();
            _this.printTemplate = new hiprint.PrintTemplate({
                template: _this.template,
            });
            _this.pagination = $.extend({}, _this.pagination, {
                total: _this.data.length,
            });
            await _this.initPrint();
        },
        handlePageSizeChange(size) {
            const _this = this;
            _this.pagination = $.extend({}, _this.pagination, {
                currentPage: 1,
                pageSize: size,
            });
            _this.initPrint();
        },
        handlePageChange(page) {
            const _this = this;
            _this.pagination = $.extend({}, _this.pagination, {
                currentPage: page,
            });
            _this.initPrint();
        },
        async initPrint() {
            const _this = this;
            let splitList = _this.$utils.splitArray(_this.data, _this.pagination.pageSize);
            let data = await _this.fetch(splitList[_this.pagination.currentPage - 1]);
            if (!_this.$utils.isNotEmptyList(data)) {
                return;
            }
            let list = data.map(item => genPrintData(_this.template, item));
            _this.printHtml = this.printTemplate.getHtml(list).html();
        },
        async toPdf() {
            const _this = this;
            if (_this.preview) {
                await _this.printTemplate.toPdf(_this.data, '打印预览');
                return;
            }
            let data = await _this.fetch(_this.data);
            if (!_this.$utils.isNotEmptyList(data)) {
                return;
            }
            let list = data.map(item => genPrintData(_this.template, item));
            await _this.printTemplate.toPdf(list, '打印预览');
        },
        doPrint() {
            const _this = this;
            if (_this.preview) {
                _this.$ChoosePrinter({
                    template: _this.template,
                    data: _this.data,
                });
                return;
            }
            _this.$ChoosePrinter({
                printMethod(printer) {
                    return HiPrint(_this.printTemplate, {
                        printer,
                        template: _this.template,
                        dataList: _this.data,
                        fetchData: _this.fetch,
                        eachData(list) {
                            return _this.$utils.splitArray(list, _this.pagination.pageSize);
                        },
                    });
                },
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.preview_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .print_container {
        width: 100%;
        height: calc(100% - 38px);
        overflow-y: auto;
    }

    .page_container {
        padding-top: 10px;

        .el-pagination {
            padding: 0 !important;
        }
    }
}
</style>